<template>
  <div class="detail-container app-container" v-loading="listLoading">
    <div class="title-info">
      <div>订单信息</div>
      <div>
        <el-button
          :disabled="temp.refund_fee != null"
          v-if="orderDetails.ship_state !== 10"
          type="danger"
          size="small"
          :validate-event="false"
          @click="handleUpdate()"
          >订单退款</el-button
        >

        <el-tooltip
          class="item"
          effect="dark"
          content="进入打印页面直接点击logo图标即可进行打印"
          placement="top"
        >
          <el-button type="primary" size="small" @click="handlePrintOrder"
            >订单打印</el-button
          >
        </el-tooltip>
      </div>
    </div>
    <div class="content-info">
      <el-row :gutter="20">
        <el-col :span="6"
          >订单编号: {{ orderDetails.id_public_goods_order_record }}</el-col
        >
        <el-col :span="6"
          >送货方式:
          {{
            orderDetails.type_of_shipment === 1 ? "到店自取" : "送货到家"
          }}</el-col
        >
        <el-col :span="6"
          >订单状态: {{ orderState[orderDetails.ship_state] }}</el-col
        >
        <el-col :span="6">下单时间: {{ orderDetails.time_order }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          >订单总价:
          {{ Number(orderDetails.all_price_4_shop_retail).toFixed(2) }}</el-col
        >
        <el-col :span="6"
          >支付金额:
          {{
            Number(orderDetails.ways_of_payment).toString().charAt(0) === "4"
              ? "微信支付(" +
                Number(orderDetails.pay_by_online).toFixed(2) +
                ")"
              : Number(orderDetails.ways_of_payment).toString().charAt(0) ===
                "3"
              ? "支付宝支付(" +
                Number(orderDetails.pay_by_online).toFixed(2) +
                ")"
              : "线下支付(" +
                Number(orderDetails.pay_by_online).toFixed(2) +
                ")"
          }}</el-col
        >
        <el-col :span="6"
          >运费: {{ Number(orderDetails.ship_money).toFixed(2) }}</el-col
        >
        <el-col :span="6">消费门店: {{ public_agent_info.agent_name }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          >要求时间: {{ orderDetails.time_require || "-" }}</el-col
        >
        <el-col :span="6"
          >订单备注: {{ orderDetails.order_remark || "-" }}</el-col
        >
      </el-row>
    </div>
    <div class="title-info">收件人信息</div>
    <div class="content-info">
      <el-row :gutter="20">
        <el-col :span="6">用户ID: {{ orderDetails.buyer_id }}</el-col>
        <el-col :span="6">下单人名称: {{ orderDetails.receive_name }}</el-col>
        <el-col :span="6">客户电话: {{ orderDetails.phone_user }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">客户地址: {{ orderDetails.receive_place }}</el-col>
      </el-row>
    </div>
    <div class="title-info">商品信息</div>
    <div class="content-info">
      <el-table
        :data="orderGoods"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          label="ID"
          prop="id"
          align="center"
          width="80"
          :class-name="getSortClass('id')"
        >
          <template slot-scope="{ row }">
            <span>{{ row.id_public_goods_info }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.goods_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="一级/二级分类" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.type_name }} / {{ row.child_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="零售规格" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.sales_describe || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出货方式" align="center">
          <template slot-scope="{ row }">
            <span>{{
              row.type_goods_from === 1
                ? "门店出货"
                : row.type_goods_from === 2
                ? "供应商出货"
                : "盘点"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="源价/供价/零售价" align="center">
          <template slot-scope="{ row }">
            <span
              >{{ row.price_4_supply_buy }}/{{ row.price_4_shop_buy }}/{{
                row.price_4_shop_retail
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="数量"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <span>{{ row.order_number }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="单价"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <span>{{ row.price_4_shop_retail }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="合计"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <span>{{ row.price_4_shop_retail * row.order_number }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="订单退款" :visible.sync="dialogFormVisible" width="28%">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="80px"
      >
        <el-row :gutter="40">
          <el-col>
            <el-form-item label="订单号" prop="id_public_goods_order_record">
              <el-input
                disabled="disabled"
                v-model="temp.id_public_goods_order_record"
                show-word-limit
                placeholder="退款的订单号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40" v-if="!payWayCountIf">
          <el-col>
            <el-form-item label="退款方式" prop="ways_of_retreat">
              <el-input
                disabled="disabled"
                v-model="ways_of_payment"
                show-word-limit
                placeholder="退款方式"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40" v-else>
          <el-col>
            <div style="margin-bottom: 10px; font-size: 15px; color: #606266">
              请输入正确的退款金额
            </div>
            <el-radio-group v-model="temp.ways_of_retreat">
              <el-radio :label="all"
                >全额退款￥{{
                  Number(orderDetails.all_price_4_shop_retail).toFixed(2)
                }}</el-radio
              >
              <el-radio v-if="cashIf" :label="cash"
                >只退现金￥（微信、支付宝）{{
                  Number(orderDetails.pay_by_online).toFixed(2)
                }}</el-radio
              >
              <el-radio v-if="balanceIf" :label="balance"
                >只退余额￥{{
                  Number(orderDetails.pay_by_left_money).toFixed(2)
                }}</el-radio
              >
              <el-radio v-if="integralIf" :label="integral"
                >只退积分￥{{
                  Number(orderDetails.pay_by_score).toFixed(2)
                }}</el-radio
              >
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col>
            <el-form-item label="退款金额" prop="refund_fee">
              <el-input
                v-model="temp.refund_fee"
                show-word-limit
                placeholder="请输入退款金额"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog"> 取消 </el-button>
        <el-button type="primary" @click="detailRefund(temp)"> 确认 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { orderDetail } from "@/api/order";
import { goodsKinds } from "@/api/goods"; // waves directive

export default {
  name: "Details",
  data() {
    return {
      all: "", //全部退
      cash: "0111", //现金
      balance: "1011", //余额
      integral: "1101", //积分
      cashIf: false,
      balanceIf: false,
      integralIf: false,
      payWayCount: "",
      payWayCountIf: false,
      dialogFormVisible: false,
      temp: {
        invoke_method: "public_4_refund_process",
        refund_fee: null, //退款金额
        pre_cmd_para_check_user_exist: true,
        ways_of_retreat: "", //退款方式（和支付方式一样）
        id_public_goods_order_record: null, //退款的订单号
        id_public_user_info: null, //用户ID
      },
      ways_of_payment: null,
      listLoading: true,
      orderDetails: {},
      public_agent_info: {},
      orderGoods: [],
      detailQuery: {
        invoke_method: "details_4_order",
        id_public_goods_order_record: null,
      },
      orderState: {
        0: "已发货",
        1: "已支付",
        3: "配货中",
        4: "已签收",
        5: "已取消",
        8: "支付失败",
        9: "退货中",
        10: "已退款",
      },
      rules: {
        // refund_fee: [{ required: true, message: '请输入退款金额', trigger: 'blur' }],
        refund_fee: [{ validator: this.validateNumber, trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getDetails();
    console.log(this.$route.params.id);
  },
  methods: {
    getDetails() {
      console.log(this.$route);
      this.detailQuery.id_public_goods_order_record = this.$route.params.id;
      orderDetail(this.Qs.stringify(this.detailQuery)).then((response) => {
        this.orderGoods = response.public_goods_order_detail_list;
        this.orderDetails = response.public_goods_order_record;
        this.public_agent_info = response.public_agent_info;
        // 给temp的参数赋值
        this.temp.id_public_user_info = this.orderDetails.buyer_id;
        this.temp.id_public_goods_order_record =
          this.orderDetails.id_public_goods_order_record;
        console.log(this.orderDetails.ways_of_payment);
        // this.temp.ways_of_retreat=this.orderDetails.ways_of_payment;
        let num0, num1, num2, num3;
        if (
          Number(this.orderDetails.ways_of_payment).toString().charAt(0) !== "1"
        ) {
          num0 = "0";
          this.cashIf = true;
        } else {
          num0 = "1";
        }
        if (
          Number(this.orderDetails.ways_of_payment).toString().charAt(1) !== "1"
        ) {
          num1 = "0";
          this.balanceIf = true;
        } else {
          num1 = "1";
        }
        if (
          Number(this.orderDetails.ways_of_payment).toString().charAt(2) !== "1"
        ) {
          num2 = "0";
          this.integralIf = true;
        } else {
          num2 = "1";
        }
        if (
          Number(this.orderDetails.ways_of_payment).toString().charAt(3) !== "1"
        ) {
          num3 = "0";
        } else {
          num3 = "1";
        }
        this.temp.ways_of_retreat = num0.concat(num1, num2, num3);
        this.all = num0.concat(num1, num2, num3);
        console.log(this.temp.ways_of_retreat);
        this.payWayCount = 0;
        for (let i = 0; i < this.all.length; i++) {
          if (this.all.charAt(i) == 0) {
            this.payWayCount++;
          }
        }
        if (this.payWayCount > 1) {
          this.payWayCountIf = true;
        }
        console.log(this.payWayCount);
        if (
          Number(this.orderDetails.ways_of_payment).toString().charAt(0) === "4"
        ) {
          this.ways_of_payment = "微信支付";
        } else if (
          Number(this.orderDetails.ways_of_payment).toString().charAt(0) === "3"
        ) {
          this.ways_of_payment = "支付宝支付";
        } else {
          this.ways_of_payment = "线下支付";
        }
        setTimeout(() => {
          this.listLoading = false;
        }, 0.5 * 1000);
      });
    },

    handlePrintOrder() {
      this.$router.push({
        name: "OrderPrint",
        query: { order_id: this.detailQuery.id_public_goods_order_record },
      });
    },
    handleUpdate() {
      this.dialogFormVisible = true;
    },
    cancelDialog() {
      this.dialogFormVisible = false;
      this.temp.refund_fee = null;
      this.getDetails();
    },
    // 判断输入的退款金额的值
    validateNumber(rule, value, callback) {
      let numberReg = /^\d+$|^\d+[.]?\d+$/;
      if (value !== "") {
        if (!numberReg.test(value)) {
          return callback(new Error("请输入正确的退款金额"));
        } else {
          if (value > this.orderDetails.all_price_4_shop_retail) {
            return callback(
              new Error(
                "退款金额已高于订单总价：" +
                  Number(this.orderDetails.all_price_4_shop_retail).toFixed(2)
              )
            );
          } else {
            return callback();
          }
          // return callback();
        }
      } else {
        return callback();
      }
    },
    // 退款
    detailRefund(temp) {
      // 先把该订单状态变成9
      orderDetail(
        this.Qs.stringify({
          invoke_method: "pre_submit_4_order",
          pre_db_para_id_public_goods_order_record: this.$route.params.id,
          ship_state: 9,
        })
      ).then((response) => {
        // 再进行退款
        goodsKinds(this.Qs.stringify(this.temp)).then((response) => {
          this.$notify({
            title: "Success",
            message: "操作成功！",
            type: "success",
            duration: 2000,
          });
          this.dialogFormVisible = false;
          if (
            Number(this.temp.refund_fee).toFixed(2) !==
            Number(this.orderDetails.all_price_4_shop_retail).toFixed(2)
          ) {
            setTimeout(() => {
              orderDetail(
                this.Qs.stringify({
                  invoke_method: "pre_submit_4_order",
                  pre_db_para_id_public_goods_order_record:
                    this.$route.params.id,
                  ship_state: 9,
                })
              );
            }, 0.5 * 1000);
          }
        });
      });
    },
    /*
     * 表格样式
     * */
    getSortClass(key) {
      const sort = this.detailQuery.sort;
      return sort === `+${key}` ? "ascending" : "descending";
    },
  },
};
</script>

<style lang="scss" scoped>
.el-radio-group {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  font-size: 0;
  padding-bottom: 20px;
}
.title-info {
  padding: 10px 24px;
  color: #222222;
  border-bottom: 2px solid #409eff;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content-info {
  padding: 24px 36px;
  .el-row {
    margin-bottom: 26px;
    font-size: 14px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
